<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>transition-timing-function属性</title>
<style type="text/css">
div{
	width:424px;
	height:406px;
	margin:0 auto;
	background:url(images/HTML5.png) center center no-repeat;
	border:5px solid #333;
	border-radius:0px;	
	}
div:hover{
	border-radius:105px;
	/*指定动画过渡的CSS属性*/
	-webkit-transition-property:border-radius;  /*Chrome浏览器兼容代码*/
	-moz-transition-propertyborder-radius;     /*Firefox浏览器兼容代码*/
	/*指定动画过渡的时间*/
	-webkit-transition-duration:1s;                /*Chrome浏览器兼容代码*/
	-moz-transition-duration:1s;                   /*Firefox浏览器兼容代码*/
	/*指定动画过以慢速开始和结束的过渡效果*/
	-webkit-transition-timing-function:ease-in-out;  /*Chrome浏览器兼容代码*/
	-moz-transition-timing-function:ease-in-out;     /*Firefox浏览器兼容代码*/
	}
</style>
</head>
<body>
<div></div>
</body>
</html>
